<template>
  <div>
    <h1>{{ msg }}</h1>
    <div class="block">
      <router-link to="/test/child1">goto test child1</router-link>
      <router-link to="/test/child2">goto test child2</router-link>
      <br>
      <span class="demonstration">默认 Hover 指示器触发</span>
      <el-button plain @click="open">可自动关闭</el-button>
      <el-button plain @click="jqueryClick">jquery click</el-button>
      <div v-demo="{ color: 'green', text: 'this is my directive !' }">
        <el-button plain @click="changeValue">change value</el-button>
      </div>
    </div>

    <!-- bootstrap3 测试 -->
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
    <a @click="openModal">Launch demo modal</a>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'test',
    data() {
      return {
        msg: 'This is test page'
      }
    },
    methods: {
      open() {
        const h = this.$createElement;
        this.$notify({
          title: '标题名称',
          message: h('i', {style: 'color: teal'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')
        });
      },
      openModal() {
        $('#myModal').modal('show');
      },
      jqueryClick() {
        $('.demonstration').css('color', 'red');
      },
      changeValue() {
        this.$parent.reset()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    color: red;
  }
</style>
